<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
export default {
  name: 'draughtCharts',
  data () {
    return {
      chartInstance: null,
      reald: null,
      initOption: null,
      timer: null,
      colorg: ['rgb(0,108,237)', 'rgb(0,207,255)', 'rgb(0,255,255)', 'rgb(6,253,188)']
    }
  },
  created () {
  },
  mounted () {
    this.initChart()
  },
  props: {
    realData: {
      type: Array,
      required: true
    }
  },
  watch: {
    realData: {
      handler (newVal, oldVal) {
        if (newVal.length > 0) {
          this.reald = JSON.parse(JSON.stringify(newVal))
          var copys = JSON.parse(JSON.stringify(this.reald))
          copys[0].splice(0, 1)
          const seriesGroup = []
          copys[0].forEach((item, index) => {
            seriesGroup.push({
              encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'createTime',
                // 将 "product" 列映射到 Y 轴。
                y: [item]
              },
              name: item,
              type: 'line',
              visualMap: false,
              symbol: 'circle', // 节点样式
              lineStyle: {
                width: 2,
                color: this.colorg[index]
              },
              markPoint: {},
              itemStyle: {
                color: this.colorg[index]
              }
            })
          })
          this.timer = setTimeout(() => {
            this.updateChart(seriesGroup, this.reald, copys[0][0].slice(-2), newVal)
          }, 800)
        }
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    initChart () {
      this.initOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: '24%',
          left: '6%',
          right: '5%',
          bottom: '0%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: { // 不显示轴刻度
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#a6bde9'
            }
          },
          axisLabel: {
            interval: 'auto',
            textStyle: {
              fontSize: 8
            }
          }
        },
        yAxis: [
          {
            nameTextStyle: {
              color: 'rgb(154, 170, 203)',
              padding: [0, 0, 0, -22]
            },
            type: 'value',
            axisLabel: {
              interval: 'auto',
              formatter: '{value}',
              color: 'rgb(154, 170, 203)'
            },
            axisTick: { // 不显示轴刻度
              show: false
            },
            splitLine: { // 属于y轴的是grid横线
              show: false,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        dataset: {
          source: []
        },
        series: []
      }
      this.chartInstance = this.$echarts.init(this.$refs.echartsPoly)
      this.chartInstance.setOption(this.initOption, true)
      this.echartsResize()
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    updateChart (seriesGroup, realData, name, newVal) {
        const grid1 = {
        top: '28%',
        left: '6%',
        right: '5%',
        bottom: '2%',
        containLabel: true
      }
      var gridFinal = grid1
      const legend1 = {
        top: '1%',
        itemWidth: 15,
        itemHeight: 8,
        textStyle: {
          color: '#a6bde9',
          fontSize: 10
        }
      }
      var legends = legend1
      var minsTemper = function (value) {
        return Math.ceil(value.min) // 想上取整
      }
      var maxsTemper = function (value) {
        return Math.ceil(value.max)
      }
      var maxR = function (value) {
        // return value.max.toFixed(1)
        value.max = value.max * 10
        var finas = Math.ceil(value.max) / 10
        return finas
      }
      const dataOption = {
        series: seriesGroup,
        yAxis: [{
          name: name
        }],
        grid: gridFinal,
        legend: legends,
        xAxis: {
          axisLabel: {
            interval:10
          }
        },
        dataset: {
          source: realData // 数组
        }
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style  scoped>
.charts_container {
  width: 100%;
  height: 100%;
}
</style>
